<template>
  <div class="Wxjl_view">
    <!-- 第一行 -->
    <el-row>
      <el-col class="header_col">
        <div class="header_title">维修档案 </div>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row>
      <el-col class="message">
        <div class="message_top">
          <div>
            <span>维修单号：</span>
            <label>{{ wxjlData.id }}</label>
          </div>
          <div>
            <span>故障装备：</span>
            <label>{{ equipmentName }}</label>
          </div>
          <div>
            <span>计划时间：</span>
            <label>{{ wxjlData.planTime | formatTimer }}</label>
          </div>
        </div>
        <div class="message_bottom">
          <div>
            <span>故障描述：</span>
            <label>{{ wxjlData.desc }}</label>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 标签 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" width="300px">
      <el-tab-pane label="维修过程" name="first">
        <div class="processLog">
          <el-button
            class="processLog_btn"
            type="button"
            round
            @click="processLogDialog = true"
            >过程记录</el-button
          >
        </div>
        <div class="firstTab_content">
          <el-timeline v-for="v in getWxjlListData" :key="v.id">
            <el-timeline-item
              :timestamp="v.creatTime | formatTimer"
              placement="top"
            >
              <el-card>
                <h4>
                  {{ v.states }}
                  <span class="spanClass"> {{ v.personList.pname }} </span>
                  <span class="spanClass2">
                    {{ v.creatTime | formatTimer }}
                  </span>
                </h4>
                <p class="firstTab_content_title">{{ v.desc }}</p>
                <p>
                  <el-image :src="v.imgSrc"></el-image>
                  <!-- <el-image :src="v.imgSrc"></el-image> -->
                  <el-image :src="url"></el-image>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-tab-pane>
      <!-- 人员抽组 -->
      <el-tab-pane label="人员抽组" name="second">
        <!-- <div class="processLog">
          <el-button class="processLog_btn" type="button" round disabled
            >编辑人员</el-button
          >
        </div> -->
        <div class="second_content">
          <el-table :data="RyczData" style="width: 100%">
            <el-table-column prop="username" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="dept" label="部门" align="center">
            </el-table-column>
            <el-table-column prop="job" label="工种" align="center">
            </el-table-column>
            <el-table-column prop="pclass" label="工种等级" align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <!-- 器材调用 -->
      <el-tab-pane label="器材调用" name="third">
        <div class="third_content">
          <el-form :model="Wxjl_view_qcglData" label-width="80px" size="small">
            <el-form-item class="item1" label="器材名称">
              <el-select
                v-model="Wxjl_view_qcglData.name"
                clearable
                placeholder="请选择器材名称"
              >
                <el-option
                  v-for="v in selectDataTypeData"
                  :key="v.keepManagement.number"
                  :label="v.keepManagement.name"
                  :value="v.keepManagement.number"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item2" label="器材数量">
              <el-input
                v-model="Wxjl_view_qcglData.count"
                placeholder="请输入器材数量"
                clearable
                style="width: 215px"
              ></el-input>
            </el-form-item>
            <div class="processLog">
              <el-button
                class="processLog_btn"
                type="button"
                round
                @click="addDetail"
                >加入明细</el-button
              >
            </div>
          </el-form>
          <!-- 表格数据 -->
          <el-table :data="QcdyData" style="width: 100%" height="500">
            <!--  <el-table-column prop="id" label="序号" width="80" align="center">
            </el-table-column> -->
            <el-table-column prop="kid" label="维修单号" align="center">
            </el-table-column>
            <el-table-column
              prop="keepManagement.name"
              label="器材名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="keepManagement.model"
              label="规格型号"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="keepUnit.unit" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
            </el-table-column>
            <el-table-column
              prop="keepFacility.name"
              label="类型"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <!-- 维修方案 -->
      <el-tab-pane label="维修方案" name="fourth">
        <div class="fourth_content">
          <p>维修方案</p>
          <div class="fourth_content_text">
            <span v-for="v in WxfaData" :key="v.id">{{ v.desc }}</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 过程记录模态框 -->
    <el-dialog title="过程记录" :visible.sync="processLogDialog" width="30%">
      <el-form :model="addWxjl_gcjlData" :label-position="labelPosition">
        <el-form-item label="维修单号" :label-width="formLabelWidth">
          <!-- style="width: 300px" -->
          <el-input
            v-model="addWxjl_gcjlData.keepId"
            placeholder="请输入维修单号"
            disabled
            style="width: 450px"
          ></el-input>
        </el-form-item>
        <el-form-item label="维修状态" :label-width="formLabelWidth">
          <el-select
            v-model="addWxjl_gcjlData.states"
            placeholder="请输入维修状态"
            style="width: 450px"
          >
            <el-option label="待维修" value="待维修"></el-option>
            <el-option label="维修中" value="维修中"></el-option>
            <el-option label="维修完成" value="维修完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-select
            v-model="addWxjl_gcjlData.userId"
            placeholder="请输入用户名"
            style="width: 450px"
          >
            <el-option label="张三" value="1"></el-option>
            <el-option label="李四" value="2"></el-option>
            <el-option label="王五" value="3"></el-option>
            <el-option label="赵六" value="4"></el-option>
            <el-option label="七七" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过程描述" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="addWxjl_gcjlData.desc"
            :row="10"
            placeholder="请输入维修过程描述"
          ></el-input>
        </el-form-item>

        <el-form-item label="上传图片" :label-width="formLabelWidth">
          <el-upload
            name="multipartFile"
            action="http://118.31.58.45:8080/maintenance/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            multiple
            :limit="1"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :on-success="success"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="imgDialog">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="addWxjl_gc">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      labelPosition: "left",
      processLogDialog: false,
      activeName: "first",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // 器材调用
      Wxjl_view_qcglData: {
        name: "",
        count: "",
      },
      // 单个维修单号的过程数据
      getWxjlListData: [],
      // 添加维修过程记录
      addWxjl_gcjlData: {
        keepId: "",
        states: "",
        userId: "",
        desc: "",
        fileAddress: "",
        creatTime: "",
      },
      formLabelWidth: "80px",
      dialogImageUrl: "",
      imgDialog: false,
      // 维修记录的当前数据
      wxjlData: [],
      // 故障装备名称
      equipmentName: "",

      // 人员抽组数据
      RyczData: [],
      // 器材调用数据
      QcdyData: [],
      // 维修方案数据
      WxfaData: [],
      // 记录过程图片名
      getImgSrcData: [],
      //  上传数据
      fileList: [],
      // 器材名称数据
      selectDataTypeData: [],
    };
  },
  methods: {
    // 获取当前点击的维修记录数据
    getWxjlData: function () {
      let WxjlData = sessionStorage.getItem("wxjlInfo");
      this.wxjlData = JSON.parse(WxjlData);
      this.equipmentName = this.wxjlData.equipment.equipmentName;
      // 添加维修过程的id
      this.addWxjl_gcjlData.keepId = this.wxjlData.id;
      // console.log(this.equipmentName)
      // console.log(this.wxjlData);
    },
    // 维修过程请求某一项的数据
    getWxjlDataList: function () {
      this.$axios({
        url: "/KeepProcess/queryByKeepId",
        method: "post",
        params: {
          keepId: this.wxjlData.id,
        },
      }).then((res) => {
        // console.log('维修过程',res.data.data);
        if (res.data.code == "0") {
          this.getWxjlListData = res.data.data;
          this.getWxjlData();
          // for (let i = 0; i < this.getWxjlListData.length; i++) {
          //   this.getImgSrcData.push(this.getWxjlListData[i].imgSrc);
          // }
          // this.$message.success("数据加载成功！");
        } else {
          this.$message.error("维修过程数据加载失败！");
        }
      });
    },
    // 获取图片预览地址
    /*     getImfUrl: function () {
      console.log(this.getImgSrcData)
      this.$axios({
        url: "/getUrl",
        method: "get",
        params: {
          // '1710243012_1666093730788.jpeg'
          fileName:  this.getImgSrcData,
        },
      }).then((res) => {
        console.log(res.data);
      });
    }, */

    //上传文件
    update(e) {
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append("multipartFile", file); //通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.$axios.post("/upload", param, config).then((res) => {
        // this.fileList = res
        // console.log( res);
      });
    },
    success: function ({ data }) {
      this.addWxjl_gcjlData.fileAddress = data[0] + "";
      // console.log(this.addData.fileAddress);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    handleExceed(files, fileList) {
      this.$message.warning(
        `单次上传只能有 1 个文件，若要修改请先删除 ${this.addData.fileAddress} 文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 添加维修过程记录
    addWxjl_gc: function () {
      this.processLogDialog = false;
      this.$axios({
        url: "/KeepProcess/add",
        method: "post",
        data: {
          keepId: this.addWxjl_gcjlData.keepId,
          states: this.addWxjl_gcjlData.states,
          userId: this.addWxjl_gcjlData.userId,
          desc: this.addWxjl_gcjlData.desc,
          imgSrc: this.addWxjl_gcjlData.fileAddress,
          creatTime: this.addWxjl_gcjlData.creatTime,
        },
      }).then((res) => {
        this.getWxjlDataList();
        console.log("添加维修过程记录", res);
      });
      // console.log(this.addWxjl_gcjlData);
      // console.log("添加维修过程记录");
    },
    // 人员抽组数据
    getRyczData: function () {
      this.$axios({
        url: "/profileDetails/personnelDrawGroups",
        method: "get",
      }).then((res) => {
        if (res.data.code == "0") {
          this.RyczData = res.data.data;
          // console.log(this.RyczData);
        } else {
          this.$message.error("人员抽组数据加载失败！");
        }
      });
    },
    // 器材调用数据
    getQcdyData: function () {
      this.$axios({
        url: "/EquipmentCall/queryAllEquipmentCall",
        method: "post",
        params: {
          id: this.wxjlData.id,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.code == "0") {
          this.QcdyData = res.data.data;
          // console.log(this.QcdyData);
        } else {
          this.$message.error("器材调用数据加载失败！");
        }
      });
    },
    // 添加明细
    addDetail: function () {
      if (this.Wxjl_view_qcglData.count == "") {
        this.$message.error("数据不能为空！");
      } else {
        this.$axios({
          url: "/EquipmentCall/add",
          method: "post",
          data: {
            // 维修单号
            kid: this.wxjlData.id,
            // 器材编号
            keepId: 256960,
            // 器材数量
            num: this.Wxjl_view_qcglData.count,
          },
        }).then((res) => {
          console.log("添加明细", res.data.code);
          if (res.data.code == "0") {
            this.getQcdyData();
          } else {
            this.$message.error("添加明细数据失败！");
          }
        });
      }
    },
    // 维修方案数据
    getWxfaData: function () {
      this.$axios({
        url: "/profileDetails/maintenanceProgram",
        method: "get",
        /*  params:{

        } */
      }).then((res) => {
        // console.log(res)
        if (res.data.code == "0") {
          this.WxfaData = res.data.data;
        } else {
          this.$message.error("维修方案数据加载失败！");
        }
      });
    },

    // 请求维修状态码
    handleClick: function () {},
    cancelDialog: function () {
      this.processLogDialog = false;
    },
    // 删除照片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.imgDialog = true;
    },

    // 器材名称和器材编号数据
    getQcName: function () {
      this.$axios({
        url: "/EquipmentCall/queryAllEquipment",
        method: "post",
      }).then((res) => {
        // console.log(res.data.data);
        if (res.data.code == "0") {
          this.selectDataTypeData = res.data.data;
          this.Wxjl_view_qcglData.name = "";
          this.Wxjl_view_qcglData.count = "";
        } else {
          this.$message.error("器材名称数据加载失败！");
        }
      });
    },
    // 获取当前本地时间
    getNowTime: function () {
      let createDateTime = new Date();
      this.addWxjl_gcjlData.creatTime = createDateTime;
      // console.log(this.addWxjl_gcjlData.creatTime);
    },
  },
  // 日期时间格式化过滤器
  filters: {
    formatTimer: function (time) {
      let date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d;
      // return y + "/" + MM + "/" + d + " " + h + ":" + m;
    },
  },

  mounted: function () {
    this.getWxjlData();
    this.getWxjlDataList();
    this.getWxfaData();
    this.getQcdyData();
    this.getRyczData();
    this.getNowTime();
    this.getQcName();
    // this.getImfUrl();
  },
};
</script>

<style lang="less" >
.Wxjl_view {
  //   background: aquamarine;
  width: 100%;
  height: 100%;
  .header_col {
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
  }

  .header_title {
    height: 40px;
    width: 100%;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
  }
  .message {
    height: 130px;
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
    // background: yellow;
    .message_top {
      width: 100%;
      height: 50%;
      //   background: red;
      line-height: 50px;
      display: flex;

      & div {
        margin-right: 100px;
        & span {
          font-size: 18px;
          font-weight: bold;
          color: #344563;
        }
        & label {
          color: #a8afbc;
          font-weight: bold;
        }
      }
    }
    .message_bottom {
      width: 100%;
      height: 50%;
      margin-top: 30px;
      //   background: red;
      & span {
        width: 100px;
        font-size: 18px;
        font-weight: bold;
        color: #344563;
        float: left;
      }
      & label {
        display: block;
        margin-right: 165px;
        font-size: 16px;
        color: #a8afbc;
        font-weight: bold;
      }
    }
  }
  // 标签
  .el-tabs {
    margin-top: 40px;
    margin-left: 30px;
    // background: yellow;
    width: calc(100% - 60px);
    height: calc(100% - 260px);
    overflow-y: auto;

    .el-tabs__item {
      font-size: 26px;
      font-weight: bold;
      color: #6dcbc0;
      padding-right: 100px;
    }

    // 下划线
    .el-tabs__active-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background-color: #6dcbc0;
      z-index: 1;
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      list-style: none;
    }
    // 底线
    .el-tabs__nav-wrap::after {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background-color: #e4e7ed;
      z-index: 1;
    }
    // 选项卡区域内容
    .el-tab-pane {
      width: 100%;
      height: 100%;
      font-size: 25px;

      // 过程记录按钮
      & .processLog {
        width: 60%;
        position: relative;
        text-align: right;
        & .processLog_btn {
          background-color: #6554c0;
          color: #fff;
        }
      }

      // 第一块
      & .firstTab_content {
        width: 50%;
        height: 100%;
        background-color: #fff;
        // margin-top: 20px;
        position: relative;

        & h4 {
          color: #344563;
          margin-bottom: 10px;
          font-size: 18px;
          & .spanClass {
            margin-left: 50px;
            font-size: 15px;
            color: #a1a8b5;
          }
          & .spanClass2 {
            margin-left: 20px;
            font-size: 15px;
            color: #a1a8b5;
          }
        }
        // 图片样式
        & .el-image {
          width: 100px;
          height: 100px;
          margin-top: 20px;
          margin-right: 20px;
          border-radius: 8px;
        }

        & .firstTab_content_title {
          font-size: 15px;
          color: #a1a8b5;
        }
      }
      // 第二块
      & .second_content {
        width: 50%;
        height: 100%;
        // margin-top: 20px;
        position: relative;
        & .el-table {
          border-radius: 8px;
          // border: 1px solid #c9c9c9;
        }
        /*         // 过程记录按钮
        & .processLog {
          position: absolute;
          top: 10px;
          right: -190px;
          & .processLog_btn {
            background-color: #6554c0;
            color: #fff;
          }
        } */
      }

      // 第三块
      & .third_content {
        width: 50%;
        height: 500px;
        margin-top: 20px;

        & .el-form {
          width: 100%;
          height: 40px;
          // background-color:red;
          position: relative;
          display: flex;
          line-height: 40px;
          margin-bottom: 10px;

          & .item2 {
            margin-left: 180px;
          }
          /*   & .el-form-item {
            margin-right: 90px;
          } */
          // 添加按钮
          & .processLog {
            width: auto;
            line-height: 40px;
            position: absolute;
            top: -8px;
            right: -150px;
            & .processLog_btn {
              background-color: #6554c0;
              color: #fff;
            }
          }
        }
        & .el-table {
          border-radius: 8px;
          // border: 1px solid #c9c9c9;
        }
      }
      // 第四块
      & .fourth_content {
        margin-top: 20px;
        width: 50%;
        display: flex;

        & p {
          font-size: 20px;
          height: 100px;
          width: 100px;
          font-weight: bold;
          // border: 1px solid red   ;
        }
        & .fourth_content_text {
          width: 680px;
          height: 350px;
          // background: #6dcbc0;
          border-radius: 10px;
          border: 1px solid #c9c9c9;

          & span {
            display: block;
            font-size: 14px;
            margin-top: 10px;
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>